import React, { useContext, useState } from 'react';
import './post.scss'
import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
import { Link, useNavigate } from 'react-router-dom'
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
import FavoriteIcon from '@mui/icons-material/Favorite';
import ThumbUpOffAltIcon from '@mui/icons-material/ThumbUpOffAlt';
import ThumbUpAltIcon from '@mui/icons-material/ThumbUpAlt';
import CommentIcon from '@mui/icons-material/Comment';
import ModeCommentIcon from '@mui/icons-material/ModeComment';
import ShareIcon from '@mui/icons-material/Share';
import '../../hover.css';
import Bids from '../bids/Bids';
import { AuthContext } from '../../context/authContext';
import Details from '../../pages/details/Details';

const Post = ({post}) => {
  const navigate = useNavigate()
  const postData=post

  const handleDetailsClick = (post) => {
    localStorage.setItem('post', JSON.stringify(postData))
    navigate('/details')
  }



  const {currentUser, setCurrentUser} = useContext(AuthContext);
  const cardStyle = currentUser.assetValue<0 ? 'post' : 'postUser'


  return (
    <div className={cardStyle}>
      <div className="container">
        <span className='bwicId'>{(currentUser.assetValue<0 ? '' : '#' )+ post.bwicId}</span>
        <span className='cusip'>{(currentUser.assetValue<0 ? '' : 'Cusip: ' )+ post.cusip}</span>
        <span className='dueDate'>{post.dueDate}</span>
        <span className='position'>{(currentUser.assetValue<0 ? '' : 'Position: ') + post.position}</span>
        <span className='price'>{(currentUser.assetValue<0 ? '' : 'Price: ') + post.price}</span>
        {currentUser.assetValue<0 ? null : <button 
          className='viewMore' 
          onClick={handleDetailsClick}
          >查看详情</button>}
        <span className='marketValue'>{post.marketValue}</span>
        <span className='totalBids'>{post.totalBids}</span>
        <span className='bidRank'>{post.bidRank? post.bidRank : '-'}</span>
        <span className='bidMarketValue'>{post.bidMarketValue? post.bidMarketValue : '-'}</span>
        <span className='action'>
        
          {post.overDue? 
            post.winner? 
              <span className='winner'>
                <Bids 
                  buttonText={'Winner: ' + post.winner}
                  bwicId={post.bwicId}
                />
              </span>
               : 
              <span className='noWinner'>
                <Bids 
                  buttonText='No Winner' 
                  bwicId={post.bwicId}
                />
              </span>
             : 
            <span className='viewBids hvr-fade' htmlFor="view"> 
              <Bids 
                buttonText='view Bids' 
                bwicId={post.bwicId}
              />
            </span>
           }
        </span>
      </div>
      
    </div>
  )
}

export default Post